<!-- 自定义模板页 -->
<template>
	<view class="view-box page_box" :style="{ backgroundColor: headData.bgcolor }">
		<view class="head-nav x-bc"><cu-custom :isBack="true"></cu-custom></view>
		<view class="content_box">
			<!-- 页头 -->
			<view class="head-bg-wrap"><image class="head-img" :src="headData.image" mode="widthFix"></image></view>
			<view v-if="viewData.length" v-for="(item, index) in viewData" :key="index">
				<!-- 轮播 -->
				<sh-banner v-if="item.type === 'banner'" :detail="item.content" :bgImage="isHome"></sh-banner>
				<!-- 菜单 -->
				<sh-menu v-if="item.type === 'menu'" :detail="item.content" :menu="item.content.style" :imgW="94"></sh-menu>
				<!-- 推荐商品 -->
				<sh-hot-goods
					v-if="(item.type === 'goods-list' && item.content.type === 2) || (item.type === 'goods-group' && item.content.type === 2)"
					:detail="item.content"
				></sh-hot-goods>
				<!-- 大图商品 -->
				<block v-if="(item.type === 'goods-list' && item.content.type === 1) || (item.type === 'goods-group' && item.content.type === 1)">
					<sh-big-card :detail="item.content"></sh-big-card>
				</block>

				<!-- 广告魔方 -->
				<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
				<!-- 优惠券 -->
				<sh-coupon v-if="item.type === 'coupons'" :detail="item.content"></sh-coupon>
				<!-- 大图商品 -->
				<sh-big-card v-if="item.type === 'seckill' || item.type === 'groupon'" :detail="item.content" :type="item.type"></sh-big-card>
				<!-- 功能标题 -->
				<sh-title-card v-if="item.type === 'title-block'" :detail="item.content"></sh-title-card>
			</view>
		</view>
		<!-- 登录提示 -->
		<t-login-modal></t-login-modal>
	</view>
</template>

<script>
import shBanner from './components/sh-banner.vue';
import shHotGoods from './components/sh-hot-goods.vue';
import shAdv from './components/sh-adv.vue';
import shCoupon from './components/sh-coupon.vue';
import shTitleCard from './components/sh-title-card.vue';
import shBigCard from './components/sh-big-card.vue';

import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {
		shBanner,
		shHotGoods,
		shTitleCard,
		shAdv,
		shCoupon,
		shBigCard
	},
	data() {
		return {
			viewData: {},
			viewId: 0,
			customData: {},
			headData: {}
		};
	},
	computed: {
		isHome() {
			if (this.$Route.path === '/pages/index/index') {
				return true;
			}
			return false;
		}
	},
	onLoad() {
		this.viewId = this.$Route.query.id;
	},
	onShow() {
		this.getViewData();
	},
	methods: {
		getViewData() {
			let that = this;
			that.$api('custom', {
				id: that.viewId
			}).then(res => {
				if (res.code == 1) {
					that.viewData = res.data.template;
					that.customData = res.data;
					that.headData = res.data.template[0].content.list[0];
				}
			});
		}
	}
};
</script>

<style lang="scss">
.view-box {
	height: 100vh;
	height: 100%;
	.head-nav {
		position: fixed;
		top: 0;
		z-index: 99;
		padding-top: var(--status-bar-height);
		height: calc(var(--status-bar-height) + 44px);
		.cuIcon-back {
			color: #fff;
			width: 60rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			background-color: rgba(#000, 0.1);
			border-radius: 50%;
		}
	}
	.head-bg-wrap {
		.head-img {
			width: 100%;
		}
	}
}
</style>
